Lesson 3: An html form with data

In this lesson, we will create a form in which you can enter your name. For example, if you enter "Bob" and click the submit button,
you'll get a page saying "Hello, Bob!". If you don't enter a name, you'll get a screen saying: "Hmm, you don't seem to have entered a name. Go back and try again please."

As before, we set everything up in four steps: create the form, create the action, register the action, and create the landing page (or in this case, pages).

1. Create the form

Paste this html into [webapp]/page03.jsp:

<html>
<head>
	<title>A simple form with data</title>
</head>
<body>
	<p>What is your name?</p>

	<form action="form03.action" method="post">
		<p><input type="text" name="yourName"></p>
		<p><input type="submit" value="Submit your name." /></p>
	</form>

</body>
</html>

2. Create the form action

Paste this code into [src]/lessons/Form03Action.java:

package lessons;

import com.opensymphony.xwork.ActionSupport;

public class Form03Action extends ActionSupport {

  String yourName;

  public void setYourName(String p_yourName) {
    yourName = p_yourName;
  }

  public String getYourName() {
    return yourName;
  }


  public String execute() throws Exception {
    if (yourName == null || yourName.length() == 0)
      return ERROR;
    else
      return SUCCESS;
  }

}

3. Register the action in xwork.xml:

Edit [webapp]/WEB-INF/classes/xwork.xml:

<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN"
"http://www.opensymphony.com/xwork/xwork-1.0.dtd">

<xwork>
  <!-- Include webwork defaults (from WebWork JAR). -->
  <include file="webwork-default.xml" />
  
  <!-- Configuration for the default package. -->
  <package name="default" extends="webwork-default">
    <!-- Default interceptor stack. --> 
    <default-interceptor-ref name="defaultStack" /> 
    
    <!-- 02 --> 
    <action name="form02" class="lessons.Form02Action"> 
      <result name="success" type="dispatcher">page02-success.jsp</result> 
    </action> 

    <!-- 03 -->
    <action name="form03" class="lessons.Form03Action">
      <result name="success" type="dispatcher">page03-success.jsp</result>
      <result name="error" type="dispatcher">page03-error.jsp</result>
    </action>

  </package>
</xwork>

4. Create the success and error pages

Create [webapp]/page03-success.jsp:

<%@ taglib uri="webwork" prefix="ww" %>
<html>
<head>
	<title>Success page for form with data</title>
</head>
<body>

Hello, <ww:property value="yourName" />!

</body>
</html>

Create [webapp]/page03-error.jsp:

<html>
<head>
	<title>Error page for form with data</title>
</head>
<body>

Hmm, you don't seem to have entered a name. Go back and try again please.

</body>
</html>

Try it

Don't forget to compile your action to [webapp]/WEB-INF/classes, and to restart your web application if necessary.

Go ahead and try it now: click the form submit button and see what happens. Try it with and without entering a name.

How the code works

There are only two differences between this example and the previous lesson.

  • When the action is called, its setYourName() setter is called with the contents of the form field named yourName.
  • After the action has been called (which is when its execute() method returns), WebWork has two options. If ERROR is returned, WebWork will return page03-error.jsp; if SUCCESS, page03-success.jsp. Just as in the last lesson, the <ww:property> tag calls the action's getter (in this case, getYourName()).

Lesson 2 - An html form with no data | Lesson 4 - An html form with data, without getters or setters